iT邦幫忙

2022 iThome 鐵人賽

DAY 10
0
自我挑戰組

學習JavaScript的基礎概念系列 第 10

Day10 閉包closure (一)

  • 分享至 

  • xImage
  •  

閉包(closure)

包住所有可以取用的變數的現象,稱為包閉,是JavaScript語言的特色。
當函式宣告後,允許該函式能夠存取與操作外部的變數,函式宣告所在的範圍裡,所有的變數與其他函式,都能被該函式存取。

例1:

回傳一個函數,因為函數就是個物件,可以把它當成一個值回傳

function greet(whattosay){

    //函數就是個物件,可以把它當成一個值回傳
    return function(name){
        console.log(whattosay +' '+ name);
    }
}

//呼叫被回傳的函數
greet('Hi')('Tony');

結果顯示:
http://imgur.com/KC42Bnj.jpg

例2:

因為包閉性,可顯示同樣結果

function greet(whattosay){

    //函數就是個物件,可以把它當成一個值回傳
    return function(name){
        console.log(whattosay +' '+ name);
    }
}

var sayHi = greet('Hi');
sayHi('Tony');

結果顯示:
http://imgur.com/KC42Bnj.jpg

為什麼 sayHi 函數仍然知道 whattosay 是什麼?
whattosay被創造再greet裡,當greet函數被呼叫時,這個函數就執行了,完成執行後whattosay的記憶體空間還存著'Hi',再呼叫sayHi()。

https://imgur.com/DkO8xRd.jpg
sayHi()是匿名函數,他創造新的執行環境,再執行到console.log,sayHi的執行環境仍可參考到whattosay在外部的記憶體空間。

因此我們何時呼叫函數沒差,不須擔心他的外部環境是否還在執行,JS會確保無論我在執行哪個函數,它都能取用到我們應該要取用到的變數,範圍沒有改變。


上一篇
Day9 JavaSript匿名函式
下一篇
Day11 閉包closure (二)
系列文
學習JavaScript的基礎概念30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言